import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import { downloadFile } from '@/utils/util'
import { InsuranceOrderStatusCnEnum } from '@/const/enum'
import Dialog from '@/components/dialog/Index'
import type { WesureRecordDto } from '@/api/insurance/daily/types'
import { exportWesureRecord, getWesureRecordDetail } from '@/api/insurance/daily'
import { Button, Col, Row } from 'ant-design-vue'

interface RenderItemDto {
    name: string
    value: string | number | null
    suffix?: string
}

@Component
export class DialogRecordDetail extends TableRender {
    @Prop() recordData!: WesureRecordDto

    @Prop() show!: boolean

    showDialog = false
    noTablePadding = true

    renderData = {
        serveCompanyName: {
            name: '派遣单位',
            value: ''
        },
        insureCompany: {
            name: '保司',
            value: ''
        },
        insurePeoples: {
            name: '投保人数',
            value: ''
        },
        comboName: {
            name: '方案名称',
            value: ''
        },
        comboCode: {
            name: '方案编码',
            value: ''
        },
        insureDay: {
            name: '投保日期',
            value: ''
        }
    } as Record<string, RenderItemDto>

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDialog = this.show
        if (this.showDialog) {
            this.getData()
        }
    }

    @Watch('showDialog', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDialog)
    }

    tableColumnConfigOld = () =>
        [
            {
                field: 'userName',
                title: '投保人名称'
            },
            {
                field: 'idCardNo',
                title: '身份证号'
            },
            {
                field: 'policyStatus',
                title: '保单状态',
                slots: {
                    default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                        const colorMap = {
                            0: '#9497B1',
                            1: '#FFA814',
                            2: '#00D679',
                            3: '#3E5FF5',
                            4: '#9497B1',
                            5: '#FF7642',
                            6: '#9497B1',
                            7: '#9497B1'
                        }
                        const statusValue = row.policyStatus % 1000
                        return (
                            <div style={`color: ${colorMap[statusValue as keyof typeof colorMap]}`}>
                                {InsuranceOrderStatusCnEnum[statusValue]}
                            </div>
                        )
                    }
                }
            }
        ] as TableRenderColumnTypes<WesureRecordDto>

    async getData() {
        await this.onPage(1)
        for (const key in this.renderData) {
            this.renderData[key as keyof typeof this.renderData].value =
                this.recordData[key as keyof typeof this.recordData] +
                (this.renderData[key as keyof typeof this.renderData]?.suffix || '')
        }
    }

    async onExport() {
        const res = await exportWesureRecord({
            projectId: this.recordData?.projectId
        })
        downloadFile(res)
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.recordData?.projectId) return []
        return getWesureRecordDetail({
            projectId: this.recordData?.projectId,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return (
            <Dialog
                v-model:show={this.showDialog}
                width="800px"
                title="保单详情"
                showClose
                v-slots={{
                    footer: () => {
                        return (
                            <Button type="primary" onClick={this.onExport}>
                                    导出
                            </Button>
                        )
                    }
                }}
            >
                <Row gutter={20}>
                    {Object.values(this.renderData).map((i) => {
                        return (
                            <Col md={8} sm={24}>
                                <div class="flex text-lg mb-20px">
                                    <div class="text-black-300 flex-shrink-0">{i.name}：</div>
                                    <div>
                                        {i.value}
                                        {i.suffix}
                                    </div>
                                </div>
                            </Col>
                        )
                    })}
                </Row>
                {super.renderTable()}
            </Dialog>
        )
    }
}

export default toNative<{ recordData: WesureRecordDto }, {}>(DialogRecordDetail)
